<include file="Public/header"/>
<include file="Public/menu"/>
<style type="text/css">
    .rush-rule{
        height: auto;
        overflow: hidden;
        border: 1px solid #dedede;
        position: relative;
        padding-bottom: 46px;
    }
    .rush-rule dt{
        border-bottom: 1px solid #dedede;
        height: auto;
        overflow: hidden;
    }
    .rush-rule dd{
        height: auto;
        overflow: hidden;
        display: flex;
        border-bottom: 1px solid #dedede;
    }
    .rush-rule dt div.rush-list{
        padding: 10px 5px;

    }
    .rush-rule dd div.rush-list{
        padding: 10px 5px;
        display: table-cell;

    }
    .rush-rule dd div.rush-list p{
        line-height: inherit;
    }
    .rush-rule dd.rush-rule-btn{
        position: absolute;
        bottom: 0px;
        left:0;
        width: 100%;
        border-bottom: none;
    }
    .rush-rule dd div.rush-list p input{
        padding-left: 5px;
        margin-left: 10px;
    }
    .rush-rule dd div.rush-list p label{
        font-weight: 400;
    }
    .rush-rule div.rush-list{
        border-left: 1px solid #dedede;
        float: left;
        text-align: center;
        height: auto;
        overflow: hidden;
    }
    .rush-rule div.rush-list:first-child{
        border-left: none;
    }
    .rush-rule .rushTime-btn{
        margin: 5px 10px;
    }
    .ui-sortable{
        width:100%;
        overflow-x: scroll;
        display: block;
    }
</style>
<!-- 内容页 -->
<div class="content-wrapper">
    <!-- 面包屑 -->
    <section class="content-header">
        <h1>
            {$title}
            <small>{$title_two}</small>
        </h1>

        <ol class="breadcrumb">
            <li><a href="{:U('Flashsales/index')}"><i class="fa fa-dashboard"></i> 限时抢购首页</a></li>
            <li class="active">新增</li>
        </ol>
    </section>

    <!-- 内容 -->
    <section class="content">

        <div class="row">
            <div class="col-md-12">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">新增限时抢购</h3>
                        <div class="box-tools">
                            <div class="btn-group pull-right" style="margin-right: 10px">
                                <a href="{:U('Flashsales/index')}" class="btn btn-sm btn-default"><i class="fa fa-list"></i>&nbsp;列表</a>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->
                    <form action="{:U('Flashsales/save_activity')}" method="post" accept-charset="UTF-8" class="form-horizontal">
                        <input type="hidden" id="special_id" name="ruledata[special_id]" value="{$ruleInfo.special_id}" />
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-1 control-label" style="width:100px;">规则名称</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <input id="title" name="ruledata[name]" value="{$ruleInfo.name}" type="text" class="form-control" placeholder="输入规则名称">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-1 control-label" style="width:100px;">规则描述</label>
                                <div class="col-sm-6">
                                    <div class="checkbox">
                                        <textarea id="description" name="ruledata[description]" class="form-control" rows="10" placeholder="输入规则描述">{$ruleInfo[description]}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-1 control-label" style="width:100px;"> 时间 </label>
                                <div class="col-sm-2">
                                    <div class="no-margin">
                                        <input id="start_time" name="ruledata[flashsales_date]" <if condition="$ruleInfo[flashsales_date]"> readonly="true" </if>  value="{$ruleInfo[flashsales_date]}" type="text" class="form-control" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <label class="col-sm-1 control-label" style="width:100px;">上传图片</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <button id="browse" type="button" class="btn btn-primary">
                                            <i class="fa fa-fw fa-plus"></i>
                                            选择上传文件
                                        </button>
                                    </div>
                                    <div id="container">
                                        <input type="hidden" name="input-num" class="input-num" />
                                        <ul id="img-list">
                                            <?php
                                                for ($i = 0 ;$i<count($images); $i++) {
                                            ?>
                                            <li onclick="default_img(this)" class="item"
                                                id="file-o_<?php echo $images[$i]['images_id'];?>">
                                                <div class="pic-box">
                                                    <img class="img" src="<?php echo $images[$i]['url'];?>">
                                                </div>
                                                <p class="img_name"><?php echo $images[$i]['url'];?></p>
                                                <p class="img-progress">100%</p>
                                                <input type="hidden" value="<?php echo $images[$i]['url'];?>" name="images[]">
                                                <a class="remove-btn glyphicon glyphicon-trash text-danger" href="javascript:void(0)" onclick="deleteImgItem(this)"></a>
                                                <?php
                                                       if ($images[$i]['image_id'] == $goods_msg['image_default_id']){
                                                   ?>
                                                <i class="glyphicon glyphicon-ok-sign text-success">默认图</i>
                                                <?php } ?>
                                            </li>
                                            <?php } ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- /.box-body -->
                            <div class="box-footer">
                                <input type="hidden" name="_token" value="7lMdsZohP4DDH6f9Pvt6gn9e8TR3yOc34ovag8h3">
                                <div class="col-sm-1"  style="width:100px;"></div>
                                <div class="col-sm-6">
                                    <div class="btn-group" style="position: relative; left: 40%">
                                        <button type="submit"  class="btn btn-info">提交</button>
                                    </div>
                                </div>

                            </div>
                            <!-- /.box-footer -->
                        </div>
                    </form>
                </div>

            </div>
        </div>

    </section>
</div>
<!-- 底部 -->

<include file="Public/common_footer"/> 
<script src="/Public/layer/layer.js"></script> 
<!--图片上传-->
<link rel="stylesheet" href="/Public/plupload/css.css" type="text/css">
<script src="/Public/plupload/js/plupload.full.min.js"></script>
<link rel="stylesheet" href="/Public/admin/jedate/jedate.css" />
<script src="/Public/admin/jedate/jedate.js"></script>
<script type="text/javascript">
    // 设置时间
    function setJedate(){
        var start = {
            dateCell: '#start_time',
            format: 'YYYY-MM-DD',
            minDate: getNowDateStr() + ' 00:00:00',
            festival: false,
            maxDate: '2099-12-31 23:59:59',
            isinitVal:true,
            isTime: false,
            choosefun: function(datas) {
                end.minDate = datas; 
            }
        };
        jeDate(start);
    }
    setJedate();
    $(function(){

        //实例化对象
        var uploader=new plupload.Uploader({
            browse_button : 'browse',//浏览按钮
            url : '/Admin/Upload/image',//请求的接口
            flash_swf_url : '/Public/plupload/js/Moxie.swf',
            silverlight_xap_url : '/Public/plupload/js/js/Moxie.xap',
        });
        //初始化
        uploader.init();
        //选中文件后，先加到列表中，绑定进度条到progress，再上传
        uploader.bind('FilesAdded',function(uploader,files){
            //加到列表中
            for(var i = 0, len = files.length; i<len; i++){
                var file_name = files[i].name; //文件名
                //构造html来更新UI
                var item=$("<li onclick='default_img(this)'>").addClass("item").attr("id","file-"+files[i].id);

                var pic_box=$("<div>").addClass("pic-box").appendTo(item);
                var img=$("<img>").addClass('img').appendTo(pic_box);
                $("<p>").addClass('img_name').text(file_name).appendTo(item);
                var progress=$("<p>").addClass("img-progress").text("100%").appendTo(item);
                item.appendTo("#img-list");
            }
            //绑定进度条
            uploader.bind('UploadProgress',function(uploader,file){
                $('#file-'+file.id+' .progress').css('width',file.percent + '%');//控制进度条
            });
            //绑定单文件上传成功
            uploader.bind('FileUploaded',function(uploader,file,rsp){

                $('#file-'+file.id+' img').attr("src", rsp.response);
                $("<input type='hidden'>").val(rsp.response).attr("name","images[]").appendTo($('#file-'+file.id));
                $("<a>").addClass("remove-btn glyphicon glyphicon-trash text-danger").attr("href","javascript:void(0)").attr("onclick","deleteImgItem(this)").appendTo($('#file-'+file.id));

                // 设置默认图片
                $('#container .input-num').val('0');
                var html = "<i class='glyphicon glyphicon-ok-sign text-success'>默认图</i>";
                $('#img-list').children('li').eq(0).append(html); // 添加 默认图html
            })
            uploader.start();
        });
    })
    // 删除li元素 之前，先判断当前是否是默认图片，如果是就将第一个li元素设置为默认图片
    function deleteImgItem(img) {
        var self_li = $(img).parents("li");

        var input_num_val = $('#container .input-num').val();

        self_li.parents('#img-list').children('li').each(function () {
            var index =  $("#img-list li").index(this);

            if (self_li[0] === this) {  // 判断当前li是不是跟ul下面的li相等
                if (input_num_val == index){
                    $('#container .input-num').val('0');

                    // 设置默认图片
                    var html = "<i class='glyphicon glyphicon-ok-sign text-success'>默认图</i>";
                    $('#img-list').children('li').eq(0).append(html); // 添加 默认图html
                }
            }

        });
        self_li.remove(); // 删除li元素

        $("#img-list li").each(function () {

            if($(this).children('i').length > 0) {
                $('#container .input-num').val($("#img-list li").index(this));
            }
        });
    }
    // 给点击当前li元素设置默认图片，并且添加input框第几个元素
    function default_img(self) {
        var self = self;
        $(self).parents('#img-list').children('li').each(function () {
            $(this).children('i').remove();
            if (self === this) {  // 判断当前li是不是跟ul下面的li相等
                var index =  $("#img-list li").index(this);
                $('#container .input-num').val(index); // 添加几个的图片，用于上传后台判断

                var html = "<i class='glyphicon glyphicon-ok-sign text-success'>默认图</i>";
                $(self).append(html); // 添加 默认图html
            }
        });

    }
</script>